<script setup>
import { transformTimeStamp } from '@/utils/dialog-utils'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  message: Object,
  showCheckBox: Boolean,
  disabledOperation: Boolean,
  disabledFooter: Boolean,
  checked: Boolean,
})
const emit = defineEmits(['openContextmenu', 'check', 'reply', 'enterDetail', 'reseCollectMsgList', 'removeColMsg'])

const { message, id, createUser, channel } = toRefs(props.message)

const timeStamp = computed(() => {
  return transformTimeStamp(message.value.createTime)
})

// 详情
function enterDetail() {
  message.value.content && emit('enterDetail', props.message)
}

function retransmission() {
  emit('reseCollectMsgList', message.value.id)
}

// 移除收藏
function remove() {
  ElMessageBox.confirm(`从收藏中移除？`, '从收藏中移除？', {
    confirmButtonText: '移除',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      emit('removeColMsg', id.value)
    })
    .catch(() => {})
}
</script>

<template>
  <div class="collect-message-card" @click="enterDetail">
    <div class="card-content">
      <MessageRender :message="message" disabled-operation @reply="emit('reply', $event)"></MessageRender>
    </div>
    <div class="card-footer">
      <div class="footer-info">
        <div class="user-name">{{ createUser }} 来自 {{ channel.name }}</div>
      </div>
      <div class="footer-control">
        <el-tooltip content="转发" :hide-after="0" placement="top">
          <SvgIcon name="msg-forward" size="12" style="cursor: pointer" @click.stop="retransmission"></SvgIcon>
        </el-tooltip>
        <el-tooltip content="移除" :hide-after="0" placement="top">
          <SvgIcon name="msg-remove" size="12" style="cursor: pointer" @click.stop="remove"></SvgIcon>
        </el-tooltip>
      </div>
      <div class="time">
        <div class="time-stamp">{{ timeStamp }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.collect-message-card {
  position: relative;
  padding: 15px 0;
  background: var(--elp-color-info-light-9);
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  &:hover {
    box-shadow: var(--elp-box-shadow);
    .card-footer {
      .footer-control {
        display: block;
      }
      .time {
        display: none;
      }
    }
  }
  .card-footer {
    @include use-flex(center, space-between);
    .footer-info {
      @include use-flex(center);
    }
    .footer-control {
      display: none;
      .svg-icon {
        margin-left: 10px;
      }
    }
  }
  .card-content {
    cursor: pointer;
    overflow: auto;
    :deep(.basic-message.current-user),
    :deep(.message-render.current-user) {
      background: none;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      margin: 12px 0;
      padding: 0;
      flex-direction: inherit;
    }
    .message-render {
      :deep(.basic-message) {
        .message-box-text-color {
          color: var(--elp-text-color-primary);
        }
      }
    }
  }
}
</style>
